
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>

          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>
          <router-link to="/productionDelivery" style="color: #409eff;">在售商品管理</router-link>>
          <router-link to="/productionDelivery/shengchengtu" style="color: #409eff;">自定义商品详情设置</router-link>
          </div>
          <div class="hei10"></div>



				<div class="con" v-loading="loading" style="padding-bottom: 120px;">
          <div style="background: rgb(249, 249, 249); padding: 20px; color: rgb(51, 51, 51);">
            自定义商品详情设置
          </div>
					<div class="kflex" style="padding: 20px;">
            <div style="width: 600px; color: rgb(51, 51, 51);">
              <div  style="margin-bottom: 40px;">
                <div style="margin-bottom: 20px; font-size: 14px;">商品名称</div>
                <div><el-input v-model="all.name" placeholder="请输入标题名"></el-input></div>
              </div>
              <div style="margin-bottom: 40px;" class="h100">
                <div style="margin-bottom: 20px; font-size: 14px;">资费概要（表格展示）</div>
                <div v-for="(item,index) in all.gaiyao" :key="index"  style="margin-bottom: 20px;">
                  <div style="margin-bottom: 10px;"><el-input v-model="item.name" placeholder="请输入自定义名称"></el-input></div>
                  <wenzhanglei @changename="changename($event,item,index)" :height="'200'" :name="item.name"></wenzhanglei>
                </div>
                <div><el-button type="primary" plain @click="add">+ 添加自定义模块</el-button></div>
              </div>

              <div style="margin-bottom: 40px;" class="h200">
                <div style="margin-bottom: 20px; font-size: 14px;">资费详情</div>
                <div v-for="(item,index) in all.xiangqing" :key="index"  style="margin-bottom: 20px;">
                  <div><el-input v-model="item.name" style="margin-bottom: 10px;" placeholder="请输入标题名"></el-input></div>
                  <!-- <div><el-input v-model="item.value" type="textarea" placeholder="请输入描述内容"></el-input></div> -->
                  <wenzhanglei @changename="changename2($event,item,index)" :height="'200'" :name="item.name"></wenzhanglei>
                </div>
                <div><el-button type="primary" plain @click="add2">+ 添加自定义模块</el-button></div>
              </div>

              <div style="margin-bottom: 40px;" class="h200">
                <div style="margin-bottom: 20px; font-size: 14px;">其他说明</div>
                <div v-for="(item,index) in all.qita" :key="index"  style="margin-bottom: 20px;">
                  <div><el-input v-model="item.name" style="margin-bottom: 10px;" placeholder="请输入标题名"></el-input></div>
                  <!-- <div><el-input v-model="item.value" placeholder="请输入描述内容"></el-input></div> -->
                  <wenzhanglei @changename="changename3($event,item,index)" :height="'200'" :name="item.name"></wenzhanglei>
                </div>
                <div><el-button type="primary" plain @click="add3">+ 添加自定义模块</el-button></div>
              </div>
            </div>
            <div id="content" style="width: 750px; margin-left: 60px; min-height: 750px; padding: 0 20px 80px; position: relative; background: url('https://photo.91haoka.cn/mobanbeijingtu2.png') #56b0ff no-repeat;">

              <div style="text-align: center; width: 100%; color: #fff; font-size: 52px; padding: 40px 0 30px; text-shadow: 4px 4px 10px rgb(86, 176, 255);">
                {{all.name}}
              </div>

              <div style=" background: #fff; border-radius: 20px; padding: 20px;">

                <div style="background: rgb(0, 159, 242); text-align: center; border: 4px solid rgb(0, 159, 242); border-radius: 20px; overflow: hidden;">
                  <div class="kflexc" style="border-bottom: 2px solid rgb(86, 176, 255);" v-for="(item,index) in all.gaiyao" :key="index">
                    <div style="color: #fff; width: 200px; font-size: 26px;">{{item.name}}</div>
                    <div class="aaaa" style="color: #EF112F; flex: 1; padding: 30px 0; background: #fff; font-size: 30px; font-weight: bold;" v-html="item.value">{{item.value}}</div>
                  </div>
                </div>

                <div v-for="(item,index) in all.xiangqing" :key="index">
                  <div style="font-size: 26px; color: rgb(0, 159, 242); padding: 20px 0; font-weight: bold;">{{item.name}}</div>
                  <div style="font-size: 22px; color: rgb(51, 51, 51); line-height: 36px;" v-html="item.value">{{item.value}}</div>
                </div>

              </div>

              <div style=" background: #fff; border-radius: 20px; padding: 20px; margin-top: 30px;">

                <div v-for="(item,index) in all.qita" :key="index">
                  <div style="font-size: 26px; color: rgb(0, 159, 242); padding: 20px 0; font-weight: bold;">{{item.name}}</div>
                  <div style="font-size: 22px; color: rgb(51, 51, 51); line-height: 36px;" v-html="item.value">{{item.value}}</div>
                </div>

<!--                <div style="font-size: 26px; color: rgb(0, 159, 242); padding: 20px 0 0;"><span style=" font-weight: bold;">协议期：</span><span style="font-size: 22px; color: rgb(51, 51, 51);">随机</span></div>

                <div style="font-size: 26px; color: rgb(0, 159, 242); padding: 20px 0 0;"><span style=" font-weight: bold;">办理年龄：</span><span style="font-size: 22px; color: rgb(51, 51, 51);">随机</span></div>

                <div style="font-size: 26px; color: rgb(0, 159, 242); padding: 20px 0 0 ;"><span style=" font-weight: bold;">归属地：</span><span style="font-size: 22px; color: rgb(51, 51, 51);">随机</span></div>

                <div style="font-size: 26px; color: rgb(0, 159, 242); padding: 20px 0;"><span style=" font-weight: bold;">特别说明：</span></div>
                <div style="font-size: 22px; color: rgb(51, 51, 51); line-height: 36px;">19元包100G通用+30G定向，国内语音0.1元/分钟，短信0.1元/条，流量使按照5元/G收取。</div> -->

              </div>


            </div>

          </div>
          <div class="kflexcc" style="margin-top: 30px;"><el-button type="danger" @click="shengchengtupian">下载图</el-button></div>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
  import wenzhanglei from '@/components/zujian/wenzhanglei.vue'


	export default{
		components: {
			"left": left,
			"top": top,
      wenzhanglei
		},
		name: 'daliangset',
		data(){
			return{
        all:{
          name:"",
          gaiyao:[],
          xiangqing:[],
          qita:[]
        }
			}
		},
		created() {

		},
		methods:{
      changename:function(e,item,index){
        this.all.gaiyao[index].value = e
      },
      changename2:function(e,item,index){
        this.all.xiangqing[index].value = e
      },
      changename3:function(e,item,index){
        this.all.qita[index].value = e
      },
      shengchengtupian:function(){
        var element2 = document.getElementById('content');
        html2canvas(element2,{
              useCORS: true, // 这个选项会自动处理跨域问题
              // scale: 1,//图片清晰度，越高越清楚，图片质量越大
              backgroundColor: null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
        }).then(canvas => {
              // 将图像添加到DOM中
              var a = document.createElement("a");
                      document.body.appendChild(a);
                      a.href = canvas.toDataURL('image/png');
                      a.download = "";
                      a.click();
        });
      },

      add:function(){
        this.all.gaiyao.push({
          name:"",
          value:""
        })
      },
      add2:function(){
        this.all.xiangqing.push({
          name:"",
          value:""
        })
      },
      add3:function(){
        this.all.qita.push({
          name:"",
          value:""
        })
      },

		}

	}
</script>

<style lang="scss" scoped>
   @import "@/assets/zuixin.scss";

   /deep/ p {
     margin-block-start: 0px;
     margin-block-end: 0px;
   }
   /deep/ .h100{
     .w-e-text-container{ height: 100px !important;}
   }
   /deep/ .h200{
     .w-e-text-container{ height: 200px !important;}
   }
</style>
